<template>
  <div>
    <van-nav-bar title="登录" :fixed="true" />
    <div class="body">
      <van-form>
        <van-field
          v-model="username"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="getCode"
            >发送验证码</van-button
          >
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="getLogin"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
  <div class="fanhui" @click="fanhui">
    <van-icon name="arrow-left" />
  </div>
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  // data() {
  //     return {
  //         username: "",
  //         password: "",
  //     };
  // },
  setup() {
    const store = useStore();
    const router = useRouter();
    const username = ref("");
    const password = ref("");
    const fanhui = () => {
      router.go(-1);
    };
    // watch(login, (oldvalue, value) => {
    //     console.log(value);
    //     if (value.status == 0) {
    //         console.log(store.login.msg);
    //         console.log(1);
    //         localStorage.setItem("token", value.result.token);
    //         localStorage.setItem("login", JSON.stringify(value));
    //         router.push("/home/my");
    //     }
    // });
    // const login = computed(() => {
    //     console.log(store.state.login);
    //     return store.state.login;
    // });
    const getLogin = () => {
      store
        .dispatch("getLogin", {
          phone: username.value,
          code: password.value,
        })
        .then((res) => {
          localStorage.setItem("token", res.result.token);
          localStorage.setItem("login", JSON.stringify(res));
          router.push("/home/my");
        });
    };
    return { username, password, getLogin, fanhui };
  },
  methods: {
    getCode() {
      this.$store.dispatch("getCode", {
        phone: this.username,
        templateId: "537707",
      });
    },
    // getLogin() {
    //     this.$store
    //         .dispatch("getLogin", {
    //             phone: this.username,
    //             code: this.password,
    //         })
    //         .then(() => {
    //             console.log(999);
    //             this.$router.push("/home/my");
    //         });
    // },
  },
};
</script>

<style lang="less" scoped>
.fanhui {
  position: absolute;
  top: 12px;
  left: 0;
  font-size: 18px;
  color: black;
  display: block;
  width: 20px;
  height: 20px;
  z-index: 5;
}
.body {
  margin-top: 46px;
  .van-button {
    margin-bottom: 20px;
  }
}
</style>
